<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderCustomEdit('设置自动约课时间',~{::style})">
    <style type="text/css">
        ul{
            list-style-type: none;
            padding: 0px;
        }
        .selectlist select{
            padding: 2px 10px;
            border-radius: 3px;
            border-color: #ccc;
            color: #666;
            outline: none;
            margin-right: 20px;
        }
        .loadingdiv {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.3);
            z-index: 999;
            display:none;
        }

        .loadingdiv img {
            position: absolute;
            left: 50%;
            top: 50%;
        }

        .loadingdiv span {
            width: 40px;
            height: 40px;
            border-left: 8px solid #fff;
            border-top: 8px solid rgba(255, 255, 255, 0.4);
            border-right: 8px solid rgba(255, 255, 255, 0.4);
            border-bottom: 8px solid rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform-origin: center;
            animation: loading 0.7s linear infinite;
        }

        @keyframes loading {
            0%{
                transform: translate(-50%, -50%) rotate(0deg);
            }
            100%{
                transform:translate(-50%,-50%) rotate(360deg);
            }
        }
        .booklist button{
            min-width: 60px;
        }

    </style>
</head>
<body>
<div class="ch-container" style="padding-left:15px;width: 98%;">
    <div class="row" >
        <div id="content" class="col-md-12 col-sm-12" style="padding:0px;">
            <div class="clear"></div>
            <fieldset id="one" style="padding-top:10px; ">
                <form class="form-horizontal" method="post" id="form2">

                    <div class="form-group">
                        <label class="control-label col-sm-2">选择约课订单:</label>
                        <div class="col-sm-10 orderList">
                            <div class="col-sm-3 checkbox" style="/*height: 120px;*/word-break: break-word;padding-left: 0px;" th:each="list:${orders}">
                                <label >
                                    <input checked type="checkbox" name="orderId" th:value="${list.id}" th:data-name="${list.packageName+'<br/>'+list.materialCnName+' | '+list.materialEnName}" th:checked="${list.state==1 || list.id==orderId}" th:disabled="${list.id==orderId}">
                                    <strong th:style="${list.orderState==1?'color:red':''}" title="显示格式：套餐名(剩余币|到期日|冻结状态)" th:utext="${#strings.concat(list.packageName,'(',(list.surplus.stripTrailingZeros().toPlainString()),'|',(list.surplusValid),(list.orderState==1?'|已冻结':''),')')}"></strong><br>
                                    <span th:if="${list.materialCnName!=null && list.materialCnName!=''}" th:utext="${list.materialCnName+' | '+list.materialEnName}"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="personId" th:value="${personId}">
                </form>
                <div class="form-horizontal">
                    <div style="border-top:1px dashed #C8C7C7;">&nbsp;</div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">选择上课时间:</label>
                        <div class="col-sm-10">
                            <ul class="timeList">
                                <li style="margin-bottom:30px;float:left;margin-right:20px;cursor:pointer;min-width: 60px" class="booklist" th:each="list:${listTime}">
                                    <button class="btn btn-success" th:if="${list.state==0}" th:data-value="${list.time}" onclick="$(this).toggleClass('btn-success','btn-danger');$(this).toggleClass('btn-danger','btn-success');" th:text="${list.time}"></button>
                                    <button class="btn btn-danger" th:if="${list.state==1}" th:data-value="${list.time}" onclick="$(this).toggleClass('btn-success','btn-danger');$(this).toggleClass('btn-danger','btn-success');" th:text="${list.time}"></button>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">将课程同步至:</label>
                        <div class="col-sm-10 checkbox checkbox-inline">
                            <label style="margin-right: 15px;"><input type="checkbox" name="weekId" value="1" style="margin-left: -15px;" th:checked="${weekId==1}" th:disabled="${weekId==1}">周一</label>
                            <label style="margin-right: 15px;"><input type="checkbox" name="weekId" value="2" style="margin-left: -15px;" th:checked="${weekId==2}" th:disabled="${weekId==2}">周二</label>
                            <label style="margin-right: 15px;"><input type="checkbox" name="weekId" value="3" style="margin-left: -15px;" th:checked="${weekId==3}" th:disabled="${weekId==3}">周三</label>
                            <label style="margin-right: 15px;"><input type="checkbox" name="weekId" value="4" style="margin-left: -15px;" th:checked="${weekId==4}" th:disabled="${weekId==4}">周四</label>
                            <label style="margin-right: 15px;"><input type="checkbox" name="weekId" value="5" style="margin-left: -15px;" th:checked="${weekId==5}" th:disabled="${weekId==5}">周五</label>
                            <label style="margin-right: 15px;"><input type="checkbox" name="weekId" value="6" style="margin-left: -15px;" th:checked="${weekId==6}" th:disabled="${weekId==6}">周六</label>
                            <label style="margin-right: 15px;"><input type="checkbox" name="weekId" value="7" style="margin-left: -15px;" th:checked="${weekId==7}" th:disabled="${weekId==7}">周日</label>
                            <label style="margin-right: 15px;"><input type="checkbox" name="all" id="allcheck" value="0" style="margin-left: -15px;">全选</label>
                        </div>
                    </div>
                    <div style="border-top:1px dashed #C8C7C7;">&nbsp;</div>
                    <div class="form-group">
                        <div class="col-sm-12 text-center">
                            <button class="btn btn-primary" onclick="checkData()">确认</button>
                            <button class="btn" style="margin-left: 50px;" onclick="layerClose()">关闭</button>
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustomEdit(~{::script})">
<script>
    $(function () {
        //星期全选，disabled的不变化
        $('#allcheck').click(function () {
            if (this.checked){
                $('input[name=weekId]').prop('checked',true);
            }else {
                $('input[name=weekId]:checked').each(function () {
                    if (!this.disabled){
                        $(this).prop('checked',false)
                    }
                })
            }
        });
    })
    //关闭弹出层
    function layerClose() {
        let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭  
    }
    function checkData() {

        let arrOrder=[];
        let arrOrderId=[];
        let arrTime=[];
        let arrWeek=[];
        $(".btn-danger").each(function () {
            arrTime.push($(this).data("value"));
        });
        $("input[name='orderId']:checked").each(function () {
            let jsonOrder={"orderId":$(this).val(),"orderName":$(this).data("name")};
            arrOrder.push(jsonOrder);
            arrOrderId.push($(this).val());
        });
        $("input[name='weekId']:checked").each(function () {
            arrWeek.push($(this).val());
        });
        console.log(arrOrder);
        console.log(arrTime);
        console.log(arrWeek);

        if (arrTime.length===0 || arrOrder.length===0 || arrWeek.length===0){
            layer.confirm('您没有选择订单|时间|星期，将会清除原有的设置信息，确定提交吗？', {
                btn: ['确定','考虑一下'] //按钮
            }, function(){
                submitData(arrOrder,arrTime,arrWeek,arrOrderId);
            }, function(){
                return;
            });
        }else {
            layer.confirm('您确定提交吗？', {
                btn: ['确定','考虑一下'] //按钮
            }, function(){
                submitData(arrOrder,arrTime,arrWeek,arrOrderId);
            }, function(){
                return;
            });
        }
    }

    function submitData(arrOrder,arrTime,arrWeek,arrOrderId) {
        let personId="[[${param.personId}]]";
        let params={"personId":personId,"orders":arrOrderId,"classTimes":arrTime,"weeks":arrWeek,"orderName":arrOrder};
        console.log(params);

        //layerClose();
        let url="/student/auto/class/setup/add/"+personId;
        $.ajax({
            type: "POST",
            url: url,
            //contentType: 'application/json;charset=utf-8',
            data: params,
            dataType: "json",
            traditional: true,
            success: function(data){
                console.log(data);
                if (data.status===1){
                    sessionStorage.setItem(personId,JSON.stringify(params));
                    console.log(sessionStorage.getItem(personId));
                    layer.close(layer.index);
                    layerClose();
                } else {
                    layer.msg("保存数据失败，"+data.errMsg,{icon: 2})
                }

            },
             error:function(e){
                 console.log(e);
             }
        });
    }
</script>
</div>
</body>
</html>